<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">

<!-- 菜单栏 -->
<!-- 菜单 Begin -->
<div class="sidebar" th:fragment="menubar">
    <nav class="sidebar-nav">
        <ul class="nav">
            <li class="nav-title">[[#{menu.navigation}]]</li>

            <li class="nav-item">
                <a th:href="@{/__${lang}__/index.html}" th:class="${reqpage=='index.html'?'nav-link active':'nav-link'}">
                    <i class="icon icon-speedometer"></i> [[#{menu.dashboard}]]
                </a>
            </li>

            <li class="nav-item nav-dropdown">
                <a href="#" class="nav-link nav-dropdown-toggle">
                    <i class="icon icon-target"></i> [[#{menu.layouts}]] <i class="fa fa-caret-left"></i>
                </a>

                <ul class="nav-dropdown-items">
                    <li class="nav-item">
                        <a href="layouts-normal.html" class="nav-link">
                            <i class="icon icon-target"></i> Normal
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="layouts-fixed-sidebar.html" class="nav-link">
                            <i class="icon icon-target"></i> Fixed Sidebar
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="layouts-fixed-header.html" class="nav-link">
                            <i class="icon icon-target"></i> Fixed Header
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="layouts-hidden-sidebar.html" class="nav-link">
                            <i class="icon icon-target"></i> Hidden Sidebar
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nav-item nav-dropdown">
                <a href="#" class="nav-link nav-dropdown-toggle">
                    <i class="icon icon-energy"></i> [[#{menu.uikits}]] <i class="fa fa-caret-left"></i>
                </a>

                <ul class="nav-dropdown-items">
                    <li class="nav-item">
                        <a href="alerts.html" class="nav-link">
                            <i class="icon icon-energy"></i> Alerts
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="buttons.html" class="nav-link">
                            <i class="icon icon-energy"></i> Buttons
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="cards.html" class="nav-link">
                            <i class="icon icon-energy"></i> Cards
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="modals.html" class="nav-link">
                            <i class="icon icon-energy"></i> Modals
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="tabs.html" class="nav-link">
                            <i class="icon icon-energy"></i> Tabs
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="progress-bars.html" class="nav-link">
                            <i class="icon icon-energy"></i> Progress Bars
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="widgets.html" class="nav-link">
                            <i class="icon icon-energy"></i> Widgets
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nav-item nav-dropdown">
                <a href="#" class="nav-link nav-dropdown-toggle">
                    <i class="icon icon-graph"></i> [[#{menu.charts}]] <i class="fa fa-caret-left"></i>
                </a>

                <ul class="nav-dropdown-items">
                    <li class="nav-item">
                        <a href="chartjs.html" class="nav-link">
                            <i class="icon icon-graph"></i> Chart.js
                        </a>
                    </li>
                </ul>
            </li>

            <li class="nav-item">
                <a href="forms.html" class="nav-link">
                    <i class="icon icon-puzzle"></i> [[#{menu.forms}]]
                </a>
            </li>

            <li class="nav-item">
                <a th:href="@{/__${lang}__/employees.html}" th:class="${reqpage=='employees.html'?'nav-link active':'nav-link'}">
                    <i class="icon icon-grid"></i> [[#{menu.employee}]]
                </a>
            </li>

            <li class="nav-title">[[#{menu.more}]]</li>

            <li class="nav-item nav-dropdown">
                <a href="#" class="nav-link nav-dropdown-toggle">
                    <i class="icon icon-umbrella"></i> [[#{menu.pages}]] <i class="fa fa-caret-left"></i>
                </a>

                <ul class="nav-dropdown-items">
                    <li class="nav-item">
                        <a href="blank.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> Blank Page
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="login.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> Login
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="register.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> Register
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="invoice.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> Invoice
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="404.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> 404
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="500.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> 500
                        </a>
                    </li>

                    <li class="nav-item">
                        <a href="settings.html" class="nav-link">
                            <i class="icon icon-umbrella"></i> Settings
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
</div>
<!-- 菜单 End -->


<!-- topbar -->
<!-- 头部 Begin -->
<div class="page-header" th:fragment="topbar">
    <nav class="navbar page-header">
        <a href="#" class="btn btn-link sidebar-mobile-toggle d-md-none mr-auto">
            <i class="fa fa-bars"></i>
        </a>

        <a class="navbar-brand" href="#">
            <img th:src="@{/imgs/logo.png}" alt="logo" height="45">
        </a>

        <a href="#" class="btn btn-link sidebar-toggle d-md-down-none">
            <i class="fa fa-bars"></i>
        </a>

        <ul class="navbar-nav ml-auto">
            <li class="nav-item d-md-down-none">
                <a href="#">
                    <i class="fa fa-bell"></i>
                    <span class="badge badge-pill badge-danger">5</span>
                </a>
            </li>

            <li class="nav-item d-md-down-none">
                <a href="#">
                    <i class="fa fa-envelope-open"></i>
                    <span class="badge badge-pill badge-danger">5</span>
                </a>
            </li>

            <li class="nav-item dropdown">
                <a class="nav-link dropdown-toggle" href="#" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
                    <img src="/imgs/avatar-1.png" class="avatar avatar-sm" alt="logo">
                    <span class="small ml-1 d-md-down-none">[[${session.username}]]</span>
                </a>

                <div class="dropdown-menu dropdown-menu-right">
                    <div class="dropdown-header">[[#{profilemenu.account}]]</div>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-user"></i> [[#{profilemenu.profile}]]
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-envelope"></i> [[#{profilemenu.messages}]]
                    </a>

                    <div class="dropdown-header">[[#{profilemenu.settings}]]</div>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-bell"></i> [[#{profilemenu.notifications}]]
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-wrench"></i> [[#{profilemenu.options}]]
                    </a>

                    <a th:href="@{/zh-CN/__${reqpage}__}" class="dropdown-item">
                        <i class="fa fa-tv"></i> [[#{profilemenu.chinese}]]
                    </a>

                    <a th:href="@{/en-US/__${reqpage}__}" class="dropdown-item">
                        <i class="fa fa-coffee"></i> [[#{profilemenu.english}]]
                    </a>

                    <a href="#" class="dropdown-item">
                        <i class="fa fa-lock"></i> [[#{profilemenu.logout}]]
                    </a>
                </div>
            </li>
        </ul>
    </nav>
</div>
<!-- 头部 End -->


</html>